<template>
  <div>
    <button @click="comp = 'News'">新闻</button>
    <button @click="comp = 'Music'">音乐</button>
    <button @click="comp = 'Game'">游戏</button>
    <!-- 
       如何监听已经被keep-alive缓存的组件失活和激活 ---  使用两个生命周期函数
         1.activated：被keep-alive 缓存的组件激活的时候调用
         2.deactivated：被keep-alive 缓存的组件失活的时候调用
     -->
    <keep-alive>
      <component :is="comp"></component>
    </keep-alive>
  </div>
</template>
<script>
import News from './components/News.vue';
import Music from './components/Music.vue';
import Game from './components/Game.vue';
export default {
  name: 'App',
  components: {
    News,
    Music,
    Game,
  },
  data() {
    return {
      comp: '',
    };
  },
};
</script>
<style></style>
